const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin }  = require('clean-webpack-plugin');

module.exports={
	//开发模式
	mode:'production',  // development production
	//入口文件的配置项
	entry:{
		index:'./src/js/index.js',
		channel:'./src/js/channel.js'	
	},
	//出口文件的配置项
	output:{
		filename:'js/[name].js',
		path: Path.resolve(__dirname,'dist')
		//publicPath:'http://xxx.com'
	},
	//模块：例如解读CSS,图片如何转换，压缩
	module:{
		rules:[		
			{
				test: /\.(htm|html)$/i,
				 use:'html-withimg-loader' 
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}	
				}
			},					
			{
				test: /\.css$/,
				//css-loader @import语法
				use: [MiniCssExtractPlugin.loader,'css-loader']
			},
			{
				test:/\.(png|jpg|gif)/ ,
				use:[{
						loader:'url-loader',
						options:{
								limit:5*1024,
								esModule: false,
								outputPath:'image/',
								publicPath:'../image'
						}
				}]
		 	},						
		]
	},
	//插件，用于生产模版和各项功能
	plugins:[
		new HtmlWebpackPlugin({
			hash:true,
			template:'./src/index.html',
			filename:'index.html',
			chunks:['index']
		}),
		new HtmlWebpackPlugin({
			hash:true,
			template:'./src/channel.html',
			filename:'channel.html',
			chunks:['channel']
		}),		
		
		new MiniCssExtractPlugin({
			filename: "css/[name].css",
		}),
		new CleanWebpackPlugin()
	],
	//配置webpack开发服务功能
	devServer:{
		contentBase:Path.resolve(__dirname,'dist'), //设置基本目录结构
		host:'localhost', //服务器的IP地址，可以使用IP也可以使用localhost
		compress:true, //服务端压缩是否开启
		progress:true, 	//显示进度条
		port:8080 //配置服务端口号
	},
}